<template>
  <ul class="common-tabs-from" ref="commonTabsFrom">
    <template v-for="(item,key) in tabsFieldProp">
      <li :key="key" v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole)">
        <span>{{ item.label }}</span>
        <template v-if="item.type==='输入框'">
          <el-input
              :placeholder="'请输入'+item.label"
              v-model="tabsSearchData[item.field]"
              clearable
          />
        </template>
        <template v-if="item.type==='密码框'">
          <el-input
              :placeholder="'请输入'+item.label"
              v-model="tabsSearchData[item.field]"
              show-password
          />
        </template>
        <template v-if="item.type==='文本域'">
          <el-input type="textarea" :placeholder="'请输入'+item.label" v-model="tabsSearchData[item.field]" :autosize="{ minRows: item.minRows, maxRows: item.maxRows}"
                    :maxlength="item.maxlength"
                    show-word-limit
          />
        </template>
        <template v-if="item.type==='单选框'">
          <el-radio-group v-model="tabsSearchData[item.field]">
            <el-radio
                v-for="(item2,key2) in item.option"
                :key="key2"
                :label="item2.value"
            >
              {{ item2.label }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type==='多选框'">
          <!--多最少和最多选几个-->
          <template v-if="item.min && item.max">
            <el-checkbox-group
                v-model="tabsSearchData[item.field]"
                :min="item.min"
                :max="item.max"
            >
              <el-checkbox
                  v-for="item2 in item.option"
                  :label="item2.value"
                  :key="item2.value"
              >
                {{ item2.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <!--没有多最少和最多选几个-->
          <template v-else>
            <el-checkbox-group v-model="tabsSearchData[item.field]">
              <el-checkbox
                  v-for="item2 in item.option"
                  :label="item2.value"
                  :key="item2.value"
              >
                {{ item2.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </template>
        <template v-if="item.type==='下拉框'">
          <!--有分组-->
          <template v-if="item.group">
            <el-select
                :placeholder="'请选择'+item.label"
                v-model="tabsSearchData[item.field]"
                :filterable="item.filterable"
                :multiple="item.multiple"
                clearable
            >
              <el-option-group
                  v-for="group in item.option"
                  :key="group.label"
                  :label="group.label">
                <el-option
                    v-for="item in group.children"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
          </template>
          <!--没有分组-->
          <template v-else>
            <el-select
                :placeholder="'请选择'+item.label"
                v-model="tabsSearchData[item.field]"
                :filterable="item.filterable"
                :multiple="item.multiple"
                clearable
            >
              <el-option
                  v-for="item2 in item.option"
                  :key="item2.value"
                  :label="item2.label"
                  :value="item2.value"
              >
              </el-option>
            </el-select>
          </template>
        </template>
        <template v-if="item.type==='级联选择器'">
          <el-cascader
              :placeholder="'请选择'+item.label"
              v-model="tabsSearchData[item.field]"
              :filterable="item.filterable"
              clearable
              :options="item.option"
              :props="{ expandTrigger: item.expandTrigger, multiple: item.multiple}"
          >
          </el-cascader>
        </template>
        <template v-if="item.type==='日期选择器'">
          <template v-if="item.timeType==='datetimerange'">
            <el-date-picker
                :placeholder="'请选择'+item.label"
                v-model="tabsSearchData[item.field]"
                :type="item.timeType"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </template>
          <template v-else>
            <el-date-picker
                :placeholder="'请选择'+item.label"
                v-model="tabsSearchData[item.field]"
                :type="item.timeType"
                value-format="timestamp"
            >
            </el-date-picker>
          </template>

        </template>
      </li>
    </template>
    <li v-for="index in liHtmlNum" :key="index+1000"></li>
    <li class="common-tabs-from-but">
      <el-button
          icon="el-icon-setting"
          circle
          @click="HandleUtils.handleParent($parent,'tabsSetUpSearchClick')"
          v-if="tabsToConfigure"
      />
      <el-button
          icon="el-icon-refresh el-icon--left"
          @click="HandleUtils.handleParent($parent,'tabsSearchReset')"
      >重置
      </el-button>
      <el-button
          icon="el-icon-search el-icon--left"
          type="primary"
          @click="HandleUtils.handleParent($parent,'tabsSearchDetermine')"
      >
        查询
      </el-button>
    </li>
  </ul>

</template>

<script>
export default {
  components: {},
  props: ['tabsFieldProp', 'tabsSearchData', 'tabsToConfigure'],
  data() {
    return {
      liHtmlNum: '',//差几个li就添加几个
    };
  },
  mounted() {
    setTimeout(() => {
      this.calculationWidth();
    }, 300)

  },
  methods: {
    //计算长度 复制按钮前面有几个li
    calculationWidth() {
      let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
      let tabsFieldPropNum = 0;//有几个显示
      for (let i = 0; i < this.tabsFieldProp.length; i++) {
        if (this.Utils.arrayContain(this.tabsFieldProp[i].routerRole, this.$store.state.routerRole)) {
          tabsFieldPropNum += 1
        }
      }
      this.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
